<style  scoped>
.Box {
  display: flex;
  width: 100%;
  height: 100%;
}
.tabs {
  width: 85%;
  height: 100%;
}
.tabs-box {
  max-height: 100%;
}
</style>
<template>
  <div>
    <div class="Box">
      <work-order @hadleaddTab="hadleaddTab"
                  @sendChooseId="getChooseId"
                  class="work"
                  :chooseId="chooseId"
                  ref="workOrder"
                  @hadleName="hadleName"></work-order>
      <el-tabs v-model="editableTabsValue"
               type="card"
               @tab-remove="removeTab"
               @tab-click="tabClick"
               class="tabs"
               :closable="editableTabs.length > 1">
        <el-tab-pane v-for="item in editableTabs"
                     :key="item.name"
                     :label="item.title"
                     :name="item.name"
                     class="tabs-box">
          <keep-alive :exclude="exclude">
            <order style="padding-left: 20px"
                   :userData="item"
                   @hadleFormdetails="hadleFormdetails"
                   v-if="!item.orderId"
                   @removeTab="removeTab"
                   :orderItem="item"
                   :orderTypeName="orderTypeName"
                   :workliouCheng="workOrderTypeId"
                   @getWorkOrderTypeByUserId="getWorkOrderTypeByUserId"></order>
            <form-details v-if="item.orderId && item.orderId != '新建' && item.orderId != '新建关联工单' && item.orderId != '合并'"
                          style="padding-left: 20px"
                          @hadleFormdetails="hadleFormdetails"
                          @removeTab="removeTab"></form-details>
            <create-order style="padding-left: 20px"
                          :orderDetailsId='orderDetailsId'
                          :orderTypeName="orderTypeName"
                          v-if="item.orderId == '新建'||item.orderId == '新建关联工单' ||item.orderId == '合并'"
                          :isOrderCreate="true"
                          @removeTab="removeTab"></create-order>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  selectAllWorkOrderStatusName,
  getWorkOrderTypeByUserId,
} from "@/api/workOrderController";
import order from "@/views/orderDataList/order.vue";
import WorkOrder from "@/components/form/WorkOrder";
import createOrder from "@/components/common/createOrder";
import formDetails from "@/views/orderDataList/formDetails.vue";
export default {
  data () {
    return {
      editableTabsValue: '',
      editableTabs: [],
      name: "",
      fromData: {},
      workOrderTypeId: {}, //流程
      orderTypeName: "",
      orderDetailsId: '',
      chooseId: ''
    };
  },
  components: {
    order,
    WorkOrder,
    formDetails,
    createOrder,
  },
  watch: {
    editableTabsValue (newVal, oldVal) {
      this.editableTabsValue = newVal
      this.initData()
    }
  },

  mounted () {
    this.getSelectAllWorkOrderStatusName();
    this.initData()
  },
  methods: {
    // 刷新页面默认停留在第一条
    initData () {
      if (typeof (this.editableTabsValue) == 'string') {
        return
      }
      this.$router.push('/orderTable/' + this.editableTabsValue)
    },
    // 接收默认选中的菜单id
    getChooseId (id) {
      this.editableTabsValue = id
    },
    // 处理详情返回界面刷新左侧的导航数据
    loadNavData () {
      this.$refs.workOrder && this.$refs.workOrder.selectByUserId('')
    },
    hadleFormdetails (val, orderDetailsId) {
      orderDetailsId ? this.orderDetailsId = orderDetailsId : ''
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].name == val) {
          this.editableTabsValue = val;
          return;
        }
      }
      if (this.editableTabs.length >= 5) {
        this.$message({
          type: "error",
          message: "页签数最大5个请关闭",
        });
        return;
      } else {
        let newTabName = val;
        this.orderTypeName = newTabName
        this.editableTabs.push({
          title: val,
          name: newTabName,
          userId: this.$store.getters.userId,
          orderTypeId: this.$store.state.orderTypeId,
          workOrderTypeId: this.$store.state.workOrderTypeId,
          orderId: val,
        });
        this.editableTabsValue = newTabName;
      }
    },
    hadleName (name) {
      if (this.editableTabs == "") {
        this.orderTypeName = name.name
        this.editableTabs.push({
          title: name.name,
          name: name.id,
          id: name.id,
          userId: this.$store.getters.userId,
          orderTypeId: name.id,
          workOrderTypeId: this.$store.state.workOrderTypeId,
        });
        this.editableTabsValue = name.id;
      }
    },
    tabClick (val) {
      this.orderTypeName = val.label
      this.$store.commit("orderTypeNameFun", val.label);
      this.initData()
    },
    hadleaddTab (val, name) {
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].name == val) {
          this.editableTabsValue = val;
          this.orderTypeName = this.editableTabs[i].title;
          return;
        }
      }
      this.addTab(val);
    },
    addTab (targetName) {
      if (this.editableTabs.length >= 5) {
        this.$message({
          type: "error",
          message: "页签数最大5个请关闭",
        });
        return;
      } else {
        let newTabName = targetName;
        this.orderTypeName = this.$store.state.orderTypeName
        this.editableTabs.push({
          title: this.$store.state.orderTypeName,
          name: newTabName,
          id: newTabName,
          userId: this.$store.getters.userId,
          orderTypeId: this.$store.state.orderTypeId,
          workOrderTypeId: this.$store.state.workOrderTypeId,
        });
        this.editableTabsValue = newTabName;
      }
    },
    removeTab (targetName) {
      this.loadNavData()
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      // return;
      // if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      let orderTypeId = this.editableTabs.length > 0 && this.editableTabs[0].orderTypeId
      this.orderTypeName = this.editableTabs.length > 0 && this.editableTabs[0].title
      this.$router.push('/orderTable/' + orderTypeId)
      // } else {
      //   tabs.forEach((tab, index) => {
      //     if (tab.name === activeName) {
      //       let nextTab = tabs[index + 1] || tabs[index - 1];
      //       if (nextTab) {
      //         activeName = nextTab.name;
      //       }
      //     }
      //   });
      //   this.editableTabs = tabs.filter((tab) => tab.name !== activeName);
      //   this.editableTabsValue = targetName || this.editableTabs[0].name;
      //   this.editableTabs.forEach((item) => {
      //     if (item.name == targetName) {
      //       this.editableTabsValue = targetName;
      //     }
      //   });
      // }
      // this.editableTabsValue = activeName;
      // this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    getSelectAllWorkOrderStatusName () {
      selectAllWorkOrderStatusName().then((res) => {
        if (res.data.retCode === 200) {
          this.fromData.statusName = res.data.data;
        }
      });
    },
  },
};
</script>
